<template>
  <div>
    <div>
      <button @click="handleBack">返回</button>
      <button @click="handleSendData">向子应用发送数据</button>
    </div>
    <micro-app
      name="sub-app-1"
      url="http://localhost:3002/"
      router-mode="native"
      baseroute="/sub-app-1/"
      iframe
      :data="data"
      @datachange="handleDataChange"
    ></micro-app>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { computed, onMounted, ref } from "vue";
import microApp from "@micro-zoe/micro-app";
import { customLog } from "@/utils/log";

const router = useRouter();

const data = ref({
  name: "jack",
  age: 25,
  handsome: true,
});

const handleBack = () => {
  router.back();
};

const handleSendData = () => {
  microApp.setData(
    "sub-app-1",
    {
      name: "job",
    },
    (res) => {
      customLog("收到子应用回复：", res);
    }
  );
};

const handleDataChange = (e) => {
  customLog("收到子应用数据-datachange方式：", e.detail.data);
  data.value = Object.assign(data.value, e.detail.data);
};

onMounted(() => {
  microApp.addDataListener("sub-app-1", (newData) => {
    customLog("收到子应用数据-addDataListener方式：", newData);
    data.value = Object.assign(data.value, newData);
  });
});
</script>
